import { useMapStore } from 'stores/mapStore.js'
/* store数据响应式 */
import { storeToRefs } from 'pinia';
export const addControl = () => {
    /* 实例化useMapStore */
    const mapStore = useMapStore()
    /* 解构并响应式 */
    const { map } = storeToRefs(mapStore)
    //实例化ZoomSlider控件并加载到地图容器中
    var zoomslider = new ol.control.ZoomSlider();
    map.value.addControl(zoomslider);
    /* ------鼠标位置控件------ */
    //实例化鼠标位置控件（MousePosition）
    var mousePositionControl = new ol.control.MousePosition({
        //坐标格式
        coordinateFormat: ol.coordinate.createStringXY(4),
        //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
        projection: 'EPSG:4326',
        //坐标信息显示样式类名，默认是'ol-mouse-position'
        className: 'custom-mouse-position',
        //显示鼠标位置信息的目标容器
        target: document.getElementById('mouse-position'),
        //未定义坐标的标记
        undefinedHTML: '&nbsp;'
    });
    map.value.addControl(mousePositionControl)
    /* ------实例化比例尺控件（ScaleLine）------ */
    var scaleLineControl = new ol.control.ScaleLine({
        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
        units: "metric"
    });
    map.value.addControl(scaleLineControl)
    /* ------实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件------  */
    var overviewMapControl = new ol.control.OverviewMap({
        //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
        className: 'ol-overviewmap ol-custom-overviewmap',
        //鹰眼中加载同坐标系下不同数据源的图层
        layers: [tdVecLayergroup, tdImgLayergroup],
        //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
        collapseLabel: '\u00BB',
        //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
        label: '\u00AB',
        //初始为展开显示方式
        collapsed: false,
        view: new ol.View({
            center: [114, 30],
            zoom: 9,
            projection: 'EPSG:4326'
        })
    });
    map.value.addControl(overviewMapControl)
    /* ------复位控件------ */
    var ZoomToExtent = new ol.control.ZoomToExtent({
        extent: [
            114.27, 30.45,
            114.50, 30.54
        ]
    })
    map.value.addControl(ZoomToExtent)

}
